<template>
	<div>
		<div class="page-header">
			<router-link to="/">
				<div class="page-home"><i class="home-icon"></i></div>
			</router-link>
			<div class="page-search">
				<input v-model="keyword" placeholder="输入城市/景点/游玩主题" v-focus>
			</div>
		</div>
		<div class="wrapper list-search">
			<ul>
				<li v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
				<li v-show="listShow">没有找到合适的内容</li>
			</ul>
		</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
	name: 'SearchHeader',
	data () {
		return {
			keyword: '',
			list: [],
			timer: null
		}
	},
	props: {
		cities: Object
	},
	computed: {
		listShow () {
			return !this.list.length
		}
	},
	watch: {
		keyword () {
			if (this.timer) {
				clearTimeout(this.timer)
			}
			if (!this.keyword) {
				this.list = []
				return
			}
			this.timer = setTimeout(() => {
				
				const result = []
				for (let i in this.cities) {
					this.cities[i].forEach((value) => {
						if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
							result.push(value)
						}
					})
				}
				this.list = result

			})
		}
	},
	methods: {
		handleCityClick (city) {
			// this.$store.commit('changeCity', city)
			this.changeCity(city)
			this.$router.push('/')
		},
		...mapMutations(['changeCity'])
	},
	mounted () {	
	    this.scroll = new BScroll('.wrapper',{
	    	click: true
	    })
	},

	directives: {
		focus: {
			inserted: function (el) {
		    	el.focus();
		    }
		}
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/setting';
@import '~@/assets/scss/css3';
@import '~@/assets/scss/mixin';
@import '~@/assets/scss/reset';
@import '~@/assets/scss/style';

.page-header {
	height: px2rem(88px);
	background-color: #fff;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: box;
    color: #333;
    box-sizing: border-box;
    border-bottom: px2rem(1px) solid #ddd;
    a {
    	color: #333;
    }
}
.page-home,.page-city {
	display: inline-block;
	vertical-align: middle;	
	text-align: center;
	line-height: px2rem(88px);
}
.page-home {
	width: px2rem(88px);
	height: px2rem(88px);	
}
.page-search {
	box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    margin-top: px2rem(14px); 
    padding-right: px2rem(40px);  
    color: #666;
    input {
    	height: px2rem(60px);
	    line-height: px2rem(60px);
	    border-radius: px2rem(30px);
	    background-color: #f6f6f6;
	    width: 100%;
	    border: none;
	    padding: 0 px2rem(20px);
	    box-sizing: border-box;
	    outline: none;
	    text-align: center;
    }
}
.page-city {
	min-width: px2rem(88px);
	padding: 0 px2rem(20px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.city-icon {
	margin-left: px2rem(8px);
	font-size: 16px;
}
.list-search {
	overflow: hidden;
	position: absolute;
	top: px2rem(88px);
	left: 0;
	right: 0;
	bottom: 0;
	li {
		line-height: px2rem(68px);
		border-bottom: px2rem(1px) solid #ddd;
		background-color: #fff;
		padding-left: px2rem(40px);
	}
}
</style>